<!-- https://www.yuque.com/jackchanel/ur8rzv/lwomzzcmgom8szg3#Jw0PD -->
<!-- 界面中存在id=jsContainer的节点A，系统会随机生成id为jsLayout的 m行 x n列 表格(m >= 3, n >= 3)，并随机选中一个td节点，请按照如下需求实现bind函数
1、bind 函数为每个td节点绑定click事件，当某个td节点被点击时class变为current，同时以该td为中心的同一行和同一列td节点class变为wrap，具体效果参考以下图片
2、每次click后，请清空所有不需要变动的td节点的class -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Table Cell Highlighting Demo</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }

      #jsContainer {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      table#jsLayout {
        border-collapse: collapse;
      }

      td {
        width: 40px;
        height: 40px;
        border: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      td.current {
        background-color: #4caf50;
        color: white;
      }

      td.wrap {
        background-color: #ffc107;
      }

      h2 {
        text-align: center;
        color: #333;
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <div id="jsContainer">
      <h2>点击表格单元格查看效果</h2>
      <table id="jsLayout"></table>
    </div>

    <script>
      function generateTable(row, col) {
        const table = document.getElementById("jsLayout");
        for (let i = 0; i < row; i++) {
          const tr = document.createElement("tr");
          for (let j = 0; j < col; j++) {
            const cell = document.createElement("td");
            cell.textContent = i * col + j + 1;
            tr.appendChild(cell);
          }
          table.appendChild(tr);
        }
      }

      // 创建表格
      generateTable(4, 5);

      // bind函数
      function bind() {
        const container = document.getElementById("jsContainer");
        const table = document.getElementById("jsLayout");

        if (!table) {
          console.error("Table with ID 'jsLayout' not found");
          return;
        }

        // 获取所有td（ceil）
        const tdNodes = table.getElementsByTagName("td");

        // 添加事件监听
        for (let i = 0; i < tdNodes.length; i++) {
          tdNodes[i].addEventListener("click", function (event) {
            clearAllClasses(tdNodes);

            // 给点击的元素 current类
            this.className = "current";

            const clickedRow = this.parentNode;

            // 该行row的Index
            const clickedRowIndex = clickedRow.rowIndex;
            // 该ceil的Index
            const clickedCellIndex = this.cellIndex;
            // 该行cell的数量
            const rowCells = clickedRow.cells;

            // 给行 wrap类
            for (let j = 0; j < rowCells.length; j++) {
              if (j !== clickedCellIndex) {
                rowCells[j].className = "wrap";
              }
            }

            // 给列 wrap类
            const rows = table.rows;
            for (let j = 0; j < rows.length; j++) {
              if (j !== clickedRowIndex) {
                const cell = rows[j].cells[clickedCellIndex];
                if (cell) {
                  cell.className = "wrap";
                }
              }
            }
          });
        }

        // 清空类
        function clearAllClasses(elements) {
          for (let i = 0; i < elements.length; i++) {
            elements[i].className = "";
          }
        }
      }

      // 调用bind函数绑定事件
      bind();
    </script>
  </body>
</html>
